<template>
  <div>
    <!-- Card -->
    <el-card class="box-card">
      <!-- 表单域 -->
      <select-area :formObj="choiceForm" @searchQuestList="getBaseQuestionList" @resetForm="resetForm"></select-area>
      <!-- 表单域   END -->

      <!-- 表格域 -->
      <div class="table-area">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first">
            <table-area
              :tableData="tableData"
              :count="counts"
              @preview-btn-click="previewBtnClick"
              @audit-btn-click="auditBtnClick"
              @publish-btn-click="publishBtnClick"
              @edit-btn-click="editBtnClick"
              @delete-btn-click="delBtnClick"
              ></table-area>
          </el-tab-pane>
          <el-tab-pane label="待审核" name="second">
            <table-area
              :tableData="tableData"
              :count="counts"
              @preview-btn-click="previewBtnClick"
              @audit-btn-click="auditBtnClick"
              @publish-btn-click="publishBtnClick"
              @edit-btn-click="editBtnClick"
              @delete-btn-click="delBtnClick"
              ></table-area>
          </el-tab-pane>
          <el-tab-pane label="已审核" name="third">
            <table-area
              :tableData="tableData"
              :count="counts"
              @preview-btn-click="previewBtnClick"
              @audit-btn-click="auditBtnClick"
              @publish-btn-click="publishBtnClick"
              @edit-btn-click="editBtnClick"
              @delete-btn-click="delBtnClick"
              ></table-area>
          </el-tab-pane>
          <el-tab-pane label="已拒绝" name="fourth">
            <table-area
              :tableData="tableData"
              :count="counts"
              @preview-btn-click="previewBtnClick"
              @audit-btn-click="auditBtnClick"
              @publish-btn-click="publishBtnClick"
              @edit-btn-click="editBtnClick"
              @delete-btn-click="delBtnClick"
              ></table-area>
          </el-tab-pane>
        </el-tabs>
        <el-pagination
          class="pagination-area"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="choiceForm.page"
          :page-sizes="[2, 5, 10]"
          :page-size="choiceForm.pagesize"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="counts">
        </el-pagination>
      </div>
      <!-- 表格域   END -->
    </el-card>
    <!-- Card   END -->

    <!-- dialog -->
    <preview-info
      v-if="VisiblePreview"
      :id="previewID"
      :VisiblePreview="VisiblePreview"
      @ClosePreview="VisiblePreview = false">
    </preview-info>
    <el-dialog title="试题审核" width="30%" @close="auditClose" :visible.sync="auditVisible">
      <div class="audit-radio">
        <el-radio v-model="radio" label="1">通过</el-radio>
        <el-radio v-model="radio" label="2">拒绝</el-radio>
      </div>
      <el-input
        class="audit-textarea"
        type="textarea"
        :rows="2"
        placeholder="请输入审核意见"
        v-model="auditOpinion">
      </el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false">取 消</el-button>
        <el-button type="primary" @click="auditSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- dialog   END -->
  </div>
</template>

<script>
import { getBaseQuesList, publishQues, choiceQues, auditQues } from '@/assets/api/subject/subject'
import SelectArea from '@/components/basemanagement/select-area'
import TableArea from '@/components/basemanagement/table-area'
import PreviewInfo from '@/views/basemanagement/preview'

export default {
  components: {
    SelectArea,
    PreviewInfo,
    TableArea
  },
  created: function () {
    // 获取题库
    this.getBaseQuestionList()
  },
  data () {
    return {
      choiceForm: {
        // 分页-当前页码
        page: 1,
        // 每页条数
        pagesize: 10,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: null
      },
      tableData: [],
      // 标签当前页名
      activeName: 'first',
      // 未来放入组件中
      counts: 0,
      // 预览弹出框
      VisiblePreview: false,
      previewID: '',
      // 审核弹出框
      auditVisible: false,
      auditID: '',
      radio: '1',
      auditOpinion: ''
    }
  },
  methods: {
    // 获取题库列表
    async getBaseQuestionList () {
      try {
        const { data } = await getBaseQuesList(this.choiceForm, true)
        this.tableData = data.items
        this.counts = data.counts
      } catch (error) {
        this.$message({
          message: '获取题库列表失败',
          type: 'warning'
        })
      }
    },
    resetForm () {
      this.choiceForm = {
        page: 1,
        pagesize: 10,
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        chkState: null
      }
    },
    // 标签页切换
    handleClick () {
      if (this.activeName === 'first') {
        this.choiceForm.chkState = null
      } else if (this.activeName === 'second') {
        this.choiceForm.chkState = 0
      } else if (this.activeName === 'third') {
        this.choiceForm.chkState = 1
      } else if (this.activeName === 'fourth') {
        this.choiceForm.chkState = 2
      }
      this.getBaseQuestionList()
    },
    // 表格按钮功能实现
    previewBtnClick (id) {
      this.VisiblePreview = true
      this.previewID = id
    },
    // 审核
    auditBtnClick (id) {
      this.auditVisible = true
      this.auditID = id
    },
    auditClose () {
      this.radio = '1'
      this.auditOpinion = ''
    },
    async auditSubmit () {
      // if输入域有值sendrequest
      if (!this.auditOpinion.trim()) {
        return this.$message({
          message: '请输入审核意见',
          type: 'warning'
        })
      }
      try {
        await auditQues(this.auditID, this.radio, this.auditOpinion)
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        this.auditVisible = false
        this.getBaseQuestionList()
      } catch (err) {
        this.$message({
          message: '操作失败！',
          type: 'err'
        })
      }
    },
    // 发布/上架
    publishBtnClick (id, state) {
      this.$confirm(`您确认${state ? '下架' : '上架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'primary'
      }).then(async () => {
        // send request
        await publishQues(id, state)
        this.$message({
          type: 'success',
          message: '操作成功!'
        })
        this.$nextTick(this.getBaseQuestionList)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 修改
    editBtnClick (id) {
      this.$router.push({
        path: '/entry',
        query: {
          id
        }
      })
    },
    // 删除
    delBtnClick (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // send request
        await choiceQues(id, 0)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.$nextTick(this.getBasicsQuestionList)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分页每页条数变化
    handleSizeChange (val) {
      this.choiceForm.pagesize = val
      this.getBaseQuestionList()
    },
    // 当前页下标变化
    handleCurrentChange (val) {
      this.choiceForm.page = val
      this.getBaseQuestionList()
    }
  }
}
</script>

<style scoped>
.alert-total {
  margin: 20px auto;
}

.audit-textarea {
  margin-top: 30px;
}
.pagination-area {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>
